<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive>
        <router-view class="view" :key="$route.fullPath"></router-view>
      </keep-alive>
    </transition>

    <div class="tab-bar">
      <router-link class="tab-bar-item icon-home" tag="div" to="/home">
        <i></i>
        首页
      </router-link>
      <router-link class="tab-bar-item icon-concern" tag="div" to="/concern">
        <i></i>
        关注
      </router-link>
      <div class="tab-bar-item icon-upload">
        <i @click="showPopup"></i>
        <van-popup v-model="show" closeable close-icon-position="bottom-left" position="bottom">
          <taking-pictures />
        </van-popup>
      </div>
      <router-link class="tab-bar-item icon-fair" tag="div" to="/fair">
        <i></i>
        市集
      </router-link>
      <router-link class="tab-bar-item icon-user" tag="div" to="/user">
        <i></i>
        我的
      </router-link>
    </div>
  </div>
</template>

<script>
import TakingPictures from "@/components/ExifComponents/TakingPictures.vue";
export default {
  components: { TakingPictures },
  data() {
    return {
      show: false,
      transitionName: ""
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    }
  },
  watch: {
    //使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if (to.meta.index > from.meta.index) {
        //设置动画名称
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    }
  }
};
</script>

<style lang="scss">
#app {
  .tab-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 55px;
    z-index: 9;
    background-color: #fffbfa;

    .tab-bar-item {
      flex: 1;
      padding: 5px;
      color: #b2b2b2;
      font-size: 12px;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      background-size: 40px 40px;
      background-repeat: no-repeat;
      background-position: center center;
      i {
        width: 35px;
        height: 35px;
        background-repeat: no-repeat;
        display: block;
        background-size: contain;
      }
      &.icon-home {
        i {
          background-image: url(./assets/images/tabbar/ZbZ.png);
        }
      }

      &.icon-concern {
        i {
          background-image: url(./assets/images/tabbar/_KR.png);
        }
      }

      &.icon-upload {
        i {
          width: 45px;
          height: 45px;
          background-image: url(./assets/images/tabbar/akw.png);
        }
        .van-popup__close-icon {
          background-image: none;
          margin-left: 145px;
        }
      }

      &.icon-fair {
        i {
          background-image: url(./assets/images/tabbar/KBH.png);
        }
      }

      &.icon-user {
        i {
          background-image: url(./assets/images/tabbar/ySk.png);
        }
      }

      &.router-link-active {
        color: #000000;
        &.icon-home {
          i {
            background-image: url(./assets/images/tabbar/n4Y.png);
          }
        }

        &.icon-concern {
          i {
            background-image: url(./assets/images/tabbar/i-M.png);
          }
        }

        &.icon-fair {
          i {
            background-image: url(./assets/images/tabbar/qgs.png);
          }
        }

        &.icon-user {
          i {
            background-image: url(./assets/images/tabbar/Mc2.png);
          }
        }
      }
    }
  }

  ::-webkit-scrollbar {
    width: 0 !important;
  }
}

.van-tabs__line {
  background-color: #14c3bc !important;
}

.van-tab {
  color: #b2b2b2 !important;
  font-weight: bolder !important;
}

.van-tab--active {
  color: #000 !important;
  font-size: 18px !important;
}

.van-icon {
  padding: 4px;
}

.van-field__control {
  font-size: 12px !important;
}

.wd-infinite-load {
  div {
    margin: 0 auto;
    text-align: center;
  }
}

.article {
  .van-multi-ellipsis--l2 {
    p {
      padding: 5px 0;
      white-space: nowrap;
      /* 2.超出的部分隐藏 */
      overflow: hidden;
      /* 3.文字用省略号替代超出的部分 */
      text-overflow: ellipsis;
      color: #949494;
      &:nth-child(1) {
        color: #000;
        font-size: 16px;
        font-weight: 700;
        padding: 15px 0;
        max-height: 80px;
      }
    }
  }
}

.van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

// .view { bug
//   width: 100%;
//   position: absolute;
// }
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 250ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.van-skeleton__row {
  height: 30px !important;
}

.van-swipe-item {
  background-color: rgb(255, 255, 255);
}
</style>
